React-portaalien hallinta: Komponenttien renderöinti DOM-hierarkian ulkopuolelle

Nykyaikaisen verkkokehityksen laajassa kentässä React on antanut lukemattomille kehittäjille maailmanlaajuisesti mahdollisuuden rakentaa dynaamisia ja erittäin interaktiivisia käyttöliittymiä. Sen komponenttipohjainen arkkitehtuuri yksinkertaistaa monimutkaisia käyttöliittymärakenteita edistäen uudelleenkäytettävyyttä ja ylläpidettävyyttä. Kuitenkin jopa Reactin elegantista suunnittelusta huolimatta kehittäjät kohtaavat toisinaan tilanteita, joissa komponenttien standardi renderöintitapa – jossa komponentit renderöivät tulosteensa lapsina vanhempansa DOM-elementin sisällä – asettaa merkittäviä rajoituksia.

Ajatellaanpa modaali-ikkunaa, jonka on ilmestyttävä kaiken muun sisällön päälle, globaalisti leijuvaa ilmoituspalkkia tai pikavalikkoa, jonka on päästävä ulos ylivuotavan vanhempikontin rajoista. Näissä tilanteissa perinteinen tapa renderöidä komponentit suoraan vanhempiensa DOM-hierarkian sisällä voi johtaa haasteisiin tyylittelyssä (kuten z-index-konfliktit), asetteluongelmiin ja tapahtumien etenemisen monimutkaisuuteen. Juuri tässä React-portaalit astuvat esiin tehokkaana ja välttämättömänä työkaluna React-kehittäjän arsenaalissa.

Tämä kattava opas sukeltaa syvälle React-portaalien malliin, tutkien sen peruskäsitteitä, käytännön sovelluksia, edistyneitä näkökohtia ja parhaita käytäntöjä. Olitpa sitten kokenut React-kehittäjä tai vasta aloittamassa matkaasi, portaalien ymmärtäminen avaa uusia mahdollisuuksia rakentaa todella vakaita ja globaalisti saavutettavia käyttäjäkokemuksia.

Ydinhaasteen ymmärtäminen: DOM-hierarkian rajoitukset

React-komponentit renderöivät oletusarvoisesti tulosteensa vanhemman komponentin DOM-solmuun. Tämä luo suoran vastaavuuden React-komponenttipuun ja selaimen DOM-puun välille. Vaikka tämä suhde on intuitiivinen ja yleensä hyödyllinen, siitä voi tulla este, kun komponentin visuaalisen esityksen on päästävä vapaaksi vanhempansa rajoituksista.

Yleiset skenaariot ja niiden kipupisteet:

• Modaalit, dialogit ja lightboxit: Nämä elementit on tyypillisesti asetettava koko sovelluksen päälle riippumatta siitä, missä ne on määritelty komponenttipuussa. Jos modaali on syvällä sisäkkäin, sen CSS:n `z-index` saattaa olla sen esivanhempien rajoittama, mikä tekee vaikeaksi varmistaa, että se näkyy aina päällimmäisenä. Lisäksi `overflow: hidden` vanhemman elementissä voi leikata osia modaalista.
• Työkaluvihjeet ja popoverit: Samoin kuin modaalit, työkaluvihjeiden tai popoverien on usein asetuttava suhteessa elementtiin, mutta niiden on ilmestyttävä sen mahdollisesti rajattujen vanhempien rajojen ulkopuolelle. `overflow: hidden` vanhemmassa voisi katkaista työkaluvihjeen.
• Ilmoitukset ja toast-viestit: Nämä globaalit viestit ilmestyvät usein näkymän ylä- tai alareunaan, mikä edellyttää, että ne renderöidään riippumatta ne laukaisseesta komponentista.
• Pikavalikot: Oikean painikkeen valikot tai mukautetut pikavalikot on sijoitettava juuri sinne, missä käyttäjä napsauttaa, ja ne usein murtautuvat ulos rajatuista vanhempikonteista varmistaakseen täyden näkyvyyden.
• Kolmannen osapuolen integraatiot: Joskus sinun on ehkä renderöitävä React-komponentti DOM-solmuun, jota hallinnoi ulkoinen kirjasto tai vanha koodi Reactin juuren ulkopuolella.

Jokaisessa näistä skenaarioista halutun visuaalisen tuloksen saavuttaminen käyttämällä vain standardia React-renderöintiä johtaa usein monimutkaiseen CSS:ään, liiallisiin `z-index`-arvoihin tai monimutkaiseen paikannuslogiikkaan, jota on vaikea ylläpitää ja skaalata. Juuri tähän React-portaalit tarjoavat siistin, idiomaattisen ratkaisun.

Mikä tarkalleen on React-portaali?

React-portaali tarjoaa ensiluokkaisen tavan renderöidä lapsielementtejä DOM-solmuun, joka on vanhemman komponentin DOM-hierarkian ulkopuolella. Vaikka portaalin sisältö renderöidään eri fyysiseen DOM-elementtiin, se käyttäytyy silti ikään kuin se olisi suora lapsi React-komponenttipuussa. Tämä tarkoittaa, että se säilyttää saman React-kontekstin (esim. Context API -arvot) ja osallistuu Reactin tapahtumien kuplimisjärjestelmään.

React-portaalien ydin on `ReactDOM.createPortal()`-metodi. Sen allekirjoitus on suoraviivainen:

ReactDOM.createPortal(child, container)

• child: Mikä tahansa renderöitävä React-lapsi, kuten elementti, merkkijono tai fragmentti.
• container: DOM-elementti, joka on jo olemassa dokumentissa. Tämä on kohde-DOM-solmu, johon `child` renderöidään.

Kun käytät `ReactDOM.createPortal()`-metodia, React luo uuden virtuaalisen DOM-alipuun määritetyn `container`-DOM-solmun alle. Tämä uusi alipuu on kuitenkin edelleen loogisesti yhteydessä komponenttiin, joka loi portaalin. Tämä "looginen yhteys" on avain ymmärtämään, miksi tapahtumien kupliminen ja konteksti toimivat odotetusti.

Ensimmäisen React-portaalisi pystyttäminen: Yksinkertainen modaaliesimerkki

Käydään läpi yleinen käyttötapaus: modaali-ikkunan luominen. Portaalin toteuttamiseksi tarvitset ensin kohde-DOM-elementin `index.html`-tiedostossasi (tai missä sovelluksesi juuri-HTML-tiedosto sijaitseekin), johon portaalin sisältö renderöidään.

Vaihe 1: Valmistele kohde-DOM-solmu

Avaa `public/index.html`-tiedostosi (tai vastaava) ja lisää uusi `div`-elementti. On yleinen käytäntö lisätä tämä juuri ennen sulkevaa `body`-tagia, pääasiallisen React-sovelluksesi juuren ulkopuolelle.

<body>
  <!-- Pääasiallinen React-sovelluksen juuri -->
  <div id="root"></div>

  <!-- Tänne portaalimme sisältö renderöidään -->
  <div id="modal-root"></div>
</body>

Vaihe 2: Luo portaalikomponentti

Nyt luodaan yksinkertainen modaalikomponentti, joka käyttää portaalia.

// Modal.js
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

const Modal = ({ children, isOpen, onClose }) => {
  const el = useRef(document.createElement('div'));

  useEffect(() => {
    // Lisää div modaalin juureen, kun komponentti liitetään DOM:iin
    modalRoot.appendChild(el.current);

    // Siivous: poista div, kun komponentti poistetaan DOM:ista
    return () => {
      modalRoot.removeChild(el.current);
    };
  }, []); // Tyhjä riippuvuustaulukko tarkoittaa, että tämä suoritetaan kerran liitettäessä ja kerran poistettaessa

  if (!isOpen) {
    return null; // Älä renderöi mitään, jos modaali ei ole auki
  }

  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      zIndex: 1000 // Varmista, että se on päällimmäisenä
    }}>
      <div style={{
        backgroundColor: 'white',
        padding: '20px',
        borderRadius: '8px',
        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
        maxWidth: '500px',
        width: '90%'
      }}>
        {children}
        <button onClick={onClose} style={{ marginTop: '15px' }}>Sulje modaali</button>
      </div>
    </div>,
    el.current // Renderöi modaalin sisältö luotuun div-elementtiimme, joka on modalRootin sisällä
  );
};

export default Modal;

Tässä esimerkissä luomme uuden `div`-elementin jokaiselle modaali-instanssille (`el.current`) ja liitämme sen `modal-root`-elementtiin. Tämä antaa meille mahdollisuuden hallita useita modaaleja tarvittaessa ilman, että ne häiritsevät toistensa elinkaarta tai sisältöä. Varsinainen modaalin sisältö (peittokuva ja valkoinen laatikko) renderöidään sitten tähän `el.current`-elementtiin käyttämällä `ReactDOM.createPortal`.

Vaihe 3: Käytä modaalikomponenttia

// App.js
import React, { useState } from 'react';
import Modal from './Modal'; // Olettaen, että Modal.js on samassa hakemistossa

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => setIsModalOpen(true);
  const handleCloseModal = () => setIsModalOpen(false);

  return (
    <div style={{ padding: '20px' }}>
      <h1>React-portaalin esimerkki</h1>
      <p>Tämä sisältö on osa pääsovelluspuuta.</p>
      <button onClick={handleOpenModal}>Avaa globaali modaali</button>

      <Modal isOpen={isModalOpen} onClose={handleCloseModal}>
        <h3>Terveisiä portaalista!</h3>
        <p>Tämä modaalin sisältö renderöidään 'root'-divin ulkopuolelle, mutta React hallinnoi sitä edelleen.</p>
      </Modal>
    </div>
  );
}

export default App;

Vaikka `Modal`-komponentti renderöidään `App`-komponentin sisällä (joka itsessään on `root`-divin sisällä), sen todellinen DOM-tuloste ilmestyy `modal-root`-divin sisään. Tämä varmistaa, että modaali peittää kaiken ilman `z-index`- tai `overflow`-ongelmia, samalla kun se hyötyy Reactin tilanhallinnasta ja komponenttien elinkaaresta.

React-portaalien keskeiset käyttötapaukset ja edistyneet sovellukset

Vaikka modaalit ovat olennainen esimerkki, React-portaalien hyödyllisyys ulottuu paljon yksinkertaisia ponnahdusikkunoita pidemmälle. Tutkitaan edistyneempiä skenaarioita, joissa portaalit tarjoavat elegantteja ratkaisuja.

1. Vakaat modaali- ja dialogijärjestelmät

Kuten nähtiin, portaalit yksinkertaistavat modaalien toteutusta. Keskeisiä etuja ovat:

• Taattu Z-Index: Renderöimällä `body`-tasolla (tai erillisessä korkean tason kontissa), modaalit voivat aina saavuttaa korkeimman `z-index`-arvon ilman taistelua syvälle sisäkkäisten CSS-kontekstien kanssa. Tämä varmistaa, että ne näkyvät johdonmukaisesti kaiken muun sisällön päällä, riippumatta siitä, mikä komponentti ne laukaisi.
• Ylivuodon välttäminen: Vanhemmat, joilla on `overflow: hidden` tai `overflow: auto`, eivät enää leikkaa modaalin sisältöä. Tämä on ratkaisevan tärkeää suurille modaaleille tai niille, joilla on dynaamista sisältöä.
• Saavutettavuus (A11y): Portaalit ovat perustavanlaatuisia saavutettavien modaalien rakentamisessa. Vaikka DOM-rakenne on erillinen, looginen React-puuyhteys mahdollistaa oikeanlaisen fokuksen hallinnan (fokuksen vangitseminen modaalin sisälle) ja ARIA-attribuuttien (kuten `aria-modal`) oikean soveltamisen. Kirjastot kuten `react-focus-lock` tai `@reach/dialog` hyödyntävät portaaleja laajasti tähän tarkoitukseen.

2. Dynaamiset työkaluvihjeet, popoverit ja pudotusvalikot

Samoin kuin modaalit, näiden elementtien on usein ilmestyttävä laukaisevan elementin viereen, mutta myös murtauduttava ulos rajatuista vanhempien asetteluista.

• Tarkka paikannus: Voit laskea laukaisevan elementin sijainnin suhteessa näkymään ja sitten asettaa työkaluvihjeen absoluuttisesti JavaScriptin avulla. Sen renderöinti portaalin kautta varmistaa, ettei mikään välissä oleva vanhempi leikkaa sitä `overflow`-ominaisuudella.
• Asettelumuutosten välttäminen: Jos työkaluvihje renderöitäisiin suoraan elementin sisään, sen läsnäolo voisi aiheuttaa asettelumuutoksia vanhemmassaan. Portaalit eristävät sen renderöinnin, estäen tahattomat uudelleenpiirrot.

3. Globaalit ilmoitukset ja toast-viestit

Sovellukset vaativat usein järjestelmän ei-estäville, väliaikaisille viesteille (esim. "Tuote lisätty ostoskoriin!", "Verkkoyhteys katkesi").

• Keskitetty hallinta: Yksi "ToastProvider"-komponentti voi hallita toast-viestien jonoa. Tämä provider voi käyttää portaalia renderöidäkseen kaikki viestit omaan `div`-elementtiinsä `body`-elementin ylä- tai alareunaan, varmistaen, että ne ovat aina näkyvissä ja johdonmukaisesti tyyliteltyjä, riippumatta siitä, missä sovelluksessa viesti laukaistaan.
• Johdonmukaisuus: Varmistaa, että kaikki monimutkaisen sovelluksen ilmoitukset näyttävät ja käyttäytyvät yhtenäisesti.

4. Mukautetut pikavalikot

Kun käyttäjä napsauttaa elementtiä hiiren oikealla painikkeella, pikavalikko ilmestyy usein. Tämä valikko on sijoitettava tarkasti kohdistimen sijaintiin ja kaiken muun sisällön päälle. Portaalit ovat tähän ihanteellisia:

• Valikkokomponentti voidaan renderöidä portaalin kautta, vastaanottaen napsautuksen koordinaatit.
• Se ilmestyy juuri sinne, missä sitä tarvitaan, ilman että napsautetun elementin vanhempihierarkia rajoittaa sitä.

5. Integrointi kolmannen osapuolen kirjastojen tai ei-React-DOM-elementtien kanssa

Kuvittele, että sinulla on olemassa oleva sovellus, jossa osaa käyttöliittymästä hallinnoi vanha JavaScript-kirjasto tai ehkä mukautettu karttaratkaisu, joka käyttää omia DOM-solmujaan. Jos haluat renderöidä pienen, interaktiivisen React-komponentin tällaisen ulkoisen DOM-solmun sisään, `ReactDOM.createPortal` on siltasi.

• Voit luoda kohde-DOM-solmun kolmannen osapuolen hallitsemalle alueelle.
• Sitten voit käyttää React-komponenttia portaalin kanssa ja injektoida React-käyttöliittymäsi kyseiseen DOM-solmuun, mikä antaa Reactin deklaratiivisen voiman tehostaa sovelluksesi ei-React-osia.

Edistyneitä näkökohtia React-portaaleja käytettäessä

Vaikka portaalit ratkaisevat monimutkaisia renderöintiongelmia, on ratkaisevan tärkeää ymmärtää, miten ne ovat vuorovaikutuksessa muiden React-ominaisuuksien ja DOM:n kanssa, jotta niitä voidaan hyödyntää tehokkaasti ja välttää yleiset sudenkuopat.

1. Tapahtumien kupliminen: Ratkaiseva ero

Yksi React-portaalien tehokkaimmista ja usein väärinymmärretyistä puolista on niiden käyttäytyminen tapahtumien kuplimisen suhteen. Vaikka ne renderöidään täysin eri DOM-solmuun, portaalin sisällä olevista elementeistä laukaistut tapahtumat kuplivat silti ylöspäin React-komponenttipuuta pitkin, aivan kuin portaalia ei olisi olemassakaan. Tämä johtuu siitä, että Reactin tapahtumajärjestelmä on synteettinen ja toimii useimmissa tapauksissa riippumatta natiivista DOM-tapahtumien kuplimisesta.

• Mitä se tarkoittaa: Jos sinulla on nappi portaalin sisällä ja sen napsautustapahtuma kuplii ylöspäin, se laukaisee kaikki `onClick`-käsittelijät sen loogisissa vanhempikomponenteissa React-puussa, ei sen DOM-vanhemmassa.
• Esimerkki: Jos `Modal`-komponenttisi on `App`-komponentin renderöimä, napsautus `Modal`-komponentin sisällä kuplii ylös `App`-komponentin tapahtumakäsittelijöihin, jos ne on määritetty. Tämä on erittäin hyödyllistä, koska se säilyttää Reactissa odotetun intuitiivisen tapahtumavirran.
• Natiivit DOM-tapahtumat: Jos liität natiiveja DOM-tapahtumakuuntelijoita suoraan (esim. käyttämällä `addEventListener` `document.body`-elementtiin), ne noudattavat natiivia DOM-puuta. Kuitenkin standardien Reactin synteettisten tapahtumien (`onClick`, `onChange`, jne.) osalta Reactin looginen puu on etusijalla.

2. Context API ja portaalit

Context API on Reactin mekanismi arvojen (kuten teemat, käyttäjän todennustila) jakamiseen komponenttipuussa ilman prop-drillingiä. Onneksi Context toimii saumattomasti portaalien kanssa.

• Portaalin kautta renderöidyllä komponentilla on edelleen pääsy kontekstiprovidereihin, jotka ovat sen esivanhempia loogisessa React-komponenttipuussa.
• Tämä tarkoittaa, että sinulla voi olla `ThemeProvider` `App`-komponenttisi yläosassa, ja portaalin kautta renderöity modaali perii silti kyseisen teemakontekstin, mikä yksinkertaistaa portaalin sisällön globaalia tyylittelyä ja tilanhallintaa.

3. Saavutettavuus (A11y) portaalien kanssa

Saavutettavien käyttöliittymien rakentaminen on ensisijaisen tärkeää globaaleille yleisöille, ja portaalit tuovat mukanaan erityisiä saavutettavuusnäkökohtia, erityisesti modaalien ja dialogien osalta.

• Fokuksen hallinta: Kun modaali avautuu, fokus tulisi vangita modaalin sisälle estääkseen käyttäjiä (erityisesti näppäimistön ja ruudunlukijan käyttäjiä) vuorovaikuttamasta sen takana olevien elementtien kanssa. Kun modaali sulkeutuu, fokuksen tulisi palata elementtiin, joka laukaisi sen. Tämä vaatii usein huolellista JavaScript-hallintaa (esim. `useRef`:n käyttöä fokusoitavien elementtien hallintaan tai erillistä kirjastoa, kuten `react-focus-lock`).
• Näppäimistönavigointi: Varmista, että `Esc`-näppäin sulkee modaalin ja `Tab`-näppäin kiertää fokusta vain modaalin sisällä.
• ARIA-attribuutit: Käytä oikein ARIA-rooleja ja -ominaisuuksia, kuten `role="dialog"`, `aria-modal="true"`, `aria-labelledby` ja `aria-describedby` portaalisi sisällössä välittääksesi sen tarkoituksen ja rakenteen avustaville teknologioille.

4. Tyylittelyhaasteet ja -ratkaisut

Vaikka portaalit ratkaisevat DOM-hierarkian ongelmia, ne eivät maagisesti ratkaise kaikkia tyylittelyn monimutkaisuuksia.

• Globaalit vs. rajoitetut tyylit: Koska portaalin sisältö renderöidään globaalisti saatavilla olevaan DOM-solmuun (kuten `body` tai `modal-root`), kaikki globaalit CSS-säännöt voivat mahdollisesti vaikuttaa siihen.
• CSS-in-JS ja CSS Modules: Nämä ratkaisut voivat auttaa kapseloimaan tyylejä ja estämään tahattomia vuotoja, mikä tekee niistä erityisen hyödyllisiä portaalin sisällön tyylittelyssä. Styled Components, Emotion tai CSS Modules voivat luoda yksilöllisiä luokkanimiä, varmistaen, että modaalisi tyylit eivät ole ristiriidassa muiden sovelluksesi osien kanssa, vaikka ne renderöidäänkin globaalisti.
• Teemoitus: Kuten Context API:n yhteydessä mainittiin, varmista, että teemoitusratkaisusi (olipa kyseessä CSS-muuttujat, CSS-in-JS-teemat tai kontekstipohjainen teemoitus) välittyy oikein portaalin lapsille.

5. Palvelinpuolen renderöinnin (SSR) näkökohdat

Jos sovelluksesi käyttää palvelinpuolen renderöintiä (SSR), sinun on oltava tietoinen siitä, miten portaalit käyttäytyvät.

• `ReactDOM.createPortal` vaatii DOM-elementin `container`-argumentikseen. SSR-ympäristössä alkuperäinen renderöinti tapahtuu palvelimella, jossa ei ole selaimen DOM:ia.
• Tämä tarkoittaa, että portaalit eivät tyypillisesti renderöidy palvelimella. Ne "hydratoituvat" tai renderöityvät vasta, kun JavaScript suoritetaan asiakaspuolella.
• Sisällölle, jonka on ehdottomasti oltava läsnä alkuperäisessä palvelinrenderöinnissä (esim. SEO:n tai kriittisen ensimaalauksen suorituskyvyn vuoksi), portaalit eivät sovellu. Kuitenkin interaktiivisille elementeille, kuten modaaleille, jotka ovat yleensä piilossa, kunnes jokin toiminto laukaisee ne, tämä on harvoin ongelma. Varmista, että komponenttisi käsittelevät siististi portaalin `container`-elementin puuttumisen palvelimella tarkistamalla sen olemassaolon (esim. `document.getElementById('modal-root')`).

6. Portaleja käyttävien komponenttien testaaminen

Portaalien kautta renderöityvien komponenttien testaaminen voi olla hieman erilaista, mutta se on hyvin tuettu suosituissa testauskirjastoissa, kuten React Testing Libraryssä.

• React Testing Library: Tämä kirjasto tekee kyselyitä oletusarvoisesti `document.body`-elementtiin, jossa portaalisi sisältö todennäköisesti sijaitsee. Joten elementtien kysely modaalin tai työkaluvihjeen sisältä usein "vain toimii".
• Mokkaus: Joissakin monimutkaisissa skenaarioissa tai jos portaalilogiiikkasi on tiiviisti sidoksissa tiettyihin DOM-rakenteisiin, saatat joutua mokkaamaan tai huolellisesti määrittämään kohde-`container`-elementin testausympäristössäsi.

Yleiset sudenkuopat ja parhaat käytännöt React-portaaleille

Varmistaaksesi, että React-portaalien käyttö on tehokasta, ylläpidettävää ja suorituskykyistä, harkitse näitä parhaita käytäntöjä ja vältä yleisiä virheitä:

1. Älä käytä portaaleja liikaa

Portaalit ovat tehokkaita, mutta niitä tulisi käyttää harkitusti. Jos komponentin visuaalinen tuloste voidaan saavuttaa rikkomatta DOM-hierarkiaa (esim. käyttämällä suhteellista tai absoluuttista paikannusta ei-ylivuotavan vanhemman sisällä), tee niin. Liiallinen turvautuminen portaaleihin voi joskus monimutkaistaa DOM-rakenteen virheenkorjausta, jos sitä ei hallita huolellisesti.

2. Varmista asianmukainen siivous (komponentin poisto)

Jos luot dynaamisesti DOM-solmun portaalillesi (kuten `Modal`-esimerkissä `el.current`), varmista, että siivoat sen, kun portaalia käyttävä komponentti poistetaan. `useEffect`-puhdistustoiminto on tähän täydellinen, estäen muistivuodot ja sotkemasta DOM:ia orvoilla elementeillä.

useEffect(() => {
  // ... liitä el.current
  return () => {
    // ... poista el.current;
  };
}, []);

Jos renderöit aina kiinteään, ennalta olemassa olevaan DOM-solmuun (kuten yhteen `modal-root`-elementtiin), itse *solmun* siivous ei ole tarpeen, mutta React hoitaa automaattisesti *portaalin sisällön* oikean poistamisen, kun vanhempikomponentti poistetaan.

3. Suorituskykynäkökohdat

Useimmissa käyttötapauksissa (modaalit, työkaluvihjeet) portaaleilla on vähäinen suorituskykyvaikutus. Kuitenkin, jos renderöit erittäin suuren tai usein päivittyvän komponentin portaalin kautta, harkitse tavanomaisia React-suorituskykyoptimointeja (esim. `React.memo`, `useCallback`, `useMemo`) kuten tekisit minkä tahansa muun monimutkaisen komponentin kanssa.

4. Priorisoi aina saavutettavuus

Kuten korostettu, saavutettavuus on kriittistä. Varmista, että portaalilla renderöity sisältösi noudattaa ARIA-ohjeita ja tarjoaa sujuvan kokemuksen kaikille käyttäjille, erityisesti niille, jotka käyttävät näppäimistönavigointia tai ruudunlukijoita.

• Modaalin fokuksen vangitseminen: Toteuta tai käytä kirjastoa, joka vangitsee näppäimistön fokuksen avoimen modaalin sisälle.
• Kuvailevat ARIA-attribuutit: Käytä `aria-labelledby`, `aria-describedby` linkittääksesi modaalin sisällön sen otsikkoon ja kuvaukseen.
• Sulkeminen näppäimistöllä: Salli sulkeminen `Esc`-näppäimellä.
• Fokuksen palauttaminen: Kun modaali sulkeutuu, palauta fokus sen avanneeseen elementtiin.

5. Käytä semanttista HTML:ää portaalien sisällä

Vaikka portaali antaa sinun renderöidä sisältöä visuaalisesti minne tahansa, muista käyttää semanttisia HTML-elementtejä portaalisi lapsielementeissä. Esimerkiksi dialogin tulisi käyttää `

// Esimerkki yksinkertaisesta PortalWrapperista
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

const createWrapperAndAppendToBody = (wrapperId) => {
  const wrapperElement = document.createElement('div');
  wrapperElement.setAttribute('id', wrapperId);
  document.body.appendChild(wrapperElement);
  return wrapperElement;
};

const PortalWrapper = ({ children, wrapperId = 'portal-wrapper' }) => {
  const [wrapperElement, setWrapperElement] = useState(null);

  useEffect(() => {
    let element = document.getElementById(wrapperId);
    let systemCreated = false;
    // jos elementtiä ei ole wrapperId:llä, luo se ja liitä se bodyyn
    if (!element) {
      systemCreated = true;
      element = createWrapperAndAppendToBody(wrapperId);
    }
    setWrapperElement(element);

    return () => {
      // Poista ohjelmallisesti luotu elementti
      if (systemCreated && element.parentNode) {
        element.parentNode.removeChild(element);
      }
    };
  }, [wrapperId]);

  if (!wrapperElement) return null;

  return ReactDOM.createPortal(children, wrapperElement);
};

export default PortalWrapper;